<template>
	<view class="goods_detail">
		<swiper indicator-dots indicator-active-color="red" @change="changeItem">
			<swiper-item v-for="(item,index) in details" :key="index">
				<image :src="item.image"></image>
			</swiper-item>
		</swiper>
		<view class="box1">
			<view class="price">
				<text>￥{{info.salePrice}}</text>
				<text>￥{{info.price}}</text>
			</view>
			<view class="goods_name">{{info.title}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view>货号：{{info.id}}</view>
			<view>库存：{{info.stock}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view class="tit">详情介绍</view>
			<view class="content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		<view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick"></uni-goods-nav>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				id: 0,
				// userInfo:null,
				details: [],
				info: {}, //当前商品的详细信息
				content: '',
				current: 0,
				options: [{
					// icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
					icon: '/static/kefu.png',
					text: '客服'
				}, {
					// icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/dianpu.png',
					icon: '/static/dianpu.png',
					text: '店铺'
				}, {
					// icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/carts.png',
					icon: '/static/carts.png',
					text: '购物车',
					info: 0
				}, ],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		components: {
			uniGoodsNav
		},
		computed: {
			...mapState('userAbout', ['userInfo']),
			...mapState('cartAbout', ['cartInfo']),
			...mapState('cartAbout', {
				goodsCount: state => state.cartInfo.goodsCount
			})
		},
		watch: {
			goodsCount: {
				handler(newVal) {
					this.options[2].info = newVal
				},
				immediate: true,
				deep: true
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getProducts()
		},
		onshow() {
			this.options[2].info = this.goodsCount
		},
		methods: {
			...mapActions('cartAbout', {
				setCart: 'setCart'
			}),
			...mapActions('cartAbout', {
				addCart: 'addCart'
			}),
			async getProducts() {
				const res = await this.$myRequest({
					url: '/api/product/content/' + this.id
				})
				this.details = res.data.data.details
				// console.log('details:',res.data)
				this.getDetails()
			},
			getDetails() {
				this.info = this.details[this.current]
				this.content = this.details[this.current].name
				// console.log('aaa', this.info)
			},
			onClick(e) {
				console.log(e)
				switch (e.index) {
					case 2:
						uni.switchTab({
							url: '/pages/cart/cart'
						})
						break;
					case 1:
						uni.showToast({
							title: '店铺',
							icon: 'none'
						})
						break;
					case 0:
						uni.showToast({
							title: '客服',
							icon: 'none'
						})
						break;
				}

			},
			async buttonClick(e) {
				if (!this.userInfo.id) {
					uni.showToast({
						title: "请登录",
						icon: "success",
						duration: 1000
					})
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/member/member"
						})
					}, 1000)
					return
				}
				if (e.index == 0) {
					const data = {
						productId: this.info.productId,
						detailId: this.info.id,
						userId: this.userInfo.id,
						quantity: 1,
					}
					const filtered = this.cartInfo.cartList.filter(
						item => JSON.stringify(item) === JSON.stringify(data)
					);
					//如果购物车中已经存在该商品，则提示已存在该商品，不会改变goodsCount的值
					if (filtered.length > 0) {
						uni.showToast({
							title: '该商品已添加购物车',
							icon: 'warn',
						})
					}
					//如果不存在该商品，则将商品加入本地缓存购物车，同时修改goodsCount的值
					 else{
						this.cartInfo.cartList.push(data);
						this.cartInfo.goodsCount++;
						//将商品信息存入数据库
						// console.log(state.cartInfo)
					}
					//不论是否已添加过购物车，都要调用addCart方法，将商品信息存入数据库，
					//已添加过购物车的会在数据库中修改商品数量
					this.addCart(data)
				}
			},
			changeItem(event) {
				this.current = event.detail.current
				this.getDetails()
			}
		}
	}
</script>

<style lang="scss">
	.goods_detail {
		swiper {
			height: 700rpx;
			//此处设置text-align属性是为了让图片居中显示，将image高度减少到90%是因为完全高度会遮挡轮播的圆点
			text-align: center;

			image {
				// width: 100%;
				height: 90%;
			}
		}

		.box1 {
			padding: 10px;

			.price {
				font-size: 35rpx;
				color: $shop-color;
				line-height: 80rpx;

				text:nth-child(2) {
					color: #ccc;
					font-size: 28rpx;
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}

			.goods_name {
				font-size: 32rpx;
				line-height: 60rpx;
			}
		}

		.box2 {
			padding: 0 10px;
			font-size: 32rpx;
			line-height: 70rpx;
		}

		.box3 {
			padding-bottom: 50px;

			.tit {
				font-size: 32rpx;
				padding-left: 10px;
				border-bottom: 1px solid #eee;
				line-height: 70rpx;
			}

			.content {
				padding: 10px;
				font-size: 28rpx;
				color: #333;
				line-height: 50rpx;
			}
		}
	}

	.goods_nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.line {
		height: 10rpx;
		width: 750rpx;
		background: #eee;
	}
</style>